<template>
    <div class="chart-sale-distribute" v-loading="loading">
        <el-radio-group v-model="selectedType" size="mini" class="radio-group">
            <el-radio v-for="{label, value} in radioOptions" :label="value" :key="value" border>{{label}}</el-radio>
        </el-radio-group>
        <div v-auto-resize class="chart-wrap map" ref="chartEl" style="height: 100%"/>
    </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

let oChart, geoJson
const propertyMap = {
  all: 'sale_quantity',
  intel: 'intel_sale_quantity',
  nonintel: 'nonintel_sale_quantity',
  ratio: 'intel_ratio'
}
export default {
  name: 'ChartSaleDistribute',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  data () {
    return {
      loading: true,
      selectedType: 'all',
      radioOptions: [
        {
          label: '总出货量',
          value: 'all'
        }, {
          label: '智能出货量',
          value: 'intel'
        }, {
          label: '非智能出货量',
          value: 'nonintel'
        }, {
          label: '智能渗透率',
          value: 'ratio'
        }
      ]
    }
  },
  watch: {
    data () {
      if (oChart) {
        this.setOption()
      } else {
        this.initMap().then(() => {
          this.setOption()
        })
      }
    },
    selectedType () {
      this.setOption()
    }
  },
  created () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.loading = true
      return Promise.all([axios.get('./geo-json/100000.json')])
        .then(([{ data: geoData }]) => {
          geoJson = geoData
          echarts.registerMap('CHINA', geoJson)
          this.$nextTick().then(() => {
            oChart = echarts.init(this.$refs.chartEl)
            this.setOption()
          })
        })
    },
    setOption () {
      this.loading = true
      const seriesData = this.constructSeriesData()
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}'
        },
        visualMap: {
          type: 'continuous',
          min: 0,
          max: seriesData.reduce((result, { value }) => value > result ? value : result, 0),
          right: '1%',
          //   dimension: 2,
          orient: 'horizontal',
          text: ['高', '低'],
          color: ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247'],
          textStyle: {
            color: '#000'
          }
        },
        series: [
          {
            type: 'map',
            map: 'CHINA',
            top: '8%',
            bottom: '2%',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                borderColor: '#111'
              }
            },
            emphasis: {
            },
            roam: true,
            data: seriesData
          }
        ]
      }
      oChart.setOption(option)
      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    constructSeriesData () {
      const arr = []
      const nameMap = new Map()
      for (const item of this.data) {
        // eslint-disable-next-line camelcase
        const { intel_ratio, province_name } = item
        const name = province_name.replace(/省/, '')
        item.intel_ratio = intel_ratio.replace(/%$/, '')
        if (!nameMap.has(name)) {
          nameMap.set(name, item)
        }
      }
      for (const { properties: { name } } of geoJson.features) {
        if (nameMap.has(name)) {
          const provinceData = nameMap.get(name)
          arr.push({ name, value: Number(provinceData[propertyMap[this.selectedType]]) })
        } else {
          arr.push({ name, value: 0 })
        }
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
    .radio-group {
        position: absolute;
        z-index: 100;
    }
</style>
